<template>
  <div class="public">
    <header>
      <el-image :src="img" @click="$router.push('/')"></el-image>

      <div class="routerList">
        <!-- <router-link
          v-for="(item, index) in routesList"
          :key="index"
          :to="item.path"
        >
          {{ $t("article") }}
        </router-link> -->
        <router-link to="/">{{ $t("article") }}</router-link>
        <router-link to="/archives">{{ $t("archives") }}</router-link>
        <router-link to="/knowledge">{{ $t("knowledge") }}</router-link>
      </div>

      <div class="right-box">
        <el-dropdown>
          <span class="language">文A</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="this.$i18n.locale = 'zh-CN'">
                英文
              </el-dropdown-item>
              <el-dropdown-item @click="this.$i18n.locale = 'en-US'">
                汉语
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

        <el-icon v-show="!theme" @click="toggleTheme(true)"><Sunny /></el-icon>
        <el-icon v-show="theme" @click="toggleTheme(false)"><Moon /></el-icon>

        <el-icon><Search /></el-icon>
      </div>
    </header>

    <main>
      <div class="public">
        <router-view></router-view>
      </div>

      <div class="right-content">
        <div class="recommend">
          <div
            style="
              height: 50px;
              line-height: 50px;
              border-bottom: 1px solid #eae7ee;
            "
          >
            推荐阅读
          </div>

          <div
            v-for="item in recommendList"
            :key="item.id"
            style="height: 40px; line-height: 40px"
          >
            {{ item.title }}
          </div>
        </div>

        <div class="recommend">
          <div
            style="
              height: 50px;
              line-height: 50px;
              border-bottom: 1px solid #eae7ee;
            "
          >
            文章标签
          </div>

          <div
            v-for="item in tagList"
            :key="item.id"
            style="height: 40px; line-height: 40px"
          >
            {{ item.label }}
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
// import routesList from "../../router/routesList";
import img from "../../assets/logo.png";
import { ref, onMounted } from "vue";
import { apiRecommendArtilce } from "@/api/article";
import { apiTags } from "@/api/tags";

const recommendList = ref([]);

const tagList = ref([]);

onMounted(() => {
  apiRecommendArtilce().then((res) => {
    recommendList.value = res.data;
  });

  apiTags().then((res) => {
    tagList.value = res.data;
  });
});

const theme = ref(false);

const toggleTheme = (flag) => {
  theme.value = flag;

  window.document.documentElement.setAttribute(
    "data-theme",
    theme.value ? "dark" : "light"
  );
};
</script>

<style lang="scss" scoped>
@import "../../style/_handle.scss";

header {
  width: 100%;
  height: 64px;
  padding: 0 18%;
  display: flex;
  align-items: center;
  @include background_color("background_color1");

  .el-image {
    height: 20px;
    margin-right: 50px;
    cursor: pointer;
  }

  a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: #000;
    @include font_color("font_color1");
  }
}

.routerList {
  flex: 1;
  display: flex;
  align-items: center;
  .active {
    color: #f00;
  }
}

.right-box {
  font-size: 24px;
  width: 150px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000;
  @include font_color("font_color1");
}

.language,
.el-icon {
  cursor: pointer;
  &:hover {
    color: #f00;
  }
}

main {
  flex: 1;
  padding: 0 18%;
  color: #000;
  background: #e7eaee;
  @include font_color("font_color1");
  @include background_color("background_color2");
  display: flex;
  justify-content: space-between;
  .right-content {
    margin-top: 10px;
    margin-left: 10px;
    width: 400px;
    height: auto;
  }
}

.recommend {
  background: #fff;
  @include background_color("background_color1");
  margin-bottom: 10px;
  div {
    margin: 0 10px;
  }
}
</style>
